<!doctype html>
<html class="theme-next use-motion theme-next-mist">
<head>
  
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

  <meta name="google-site-verification" content="K8DCBviaoTBKVs28YBB7IBIbospQ9RVlgSh81RYMUhY" />


  <meta name="baidu-site-verification" content="tXr3ZTm3Hx" />



  <link rel="stylesheet" type="text/css" href="/vendors/fancybox/source/jquery.fancybox.css?v=2.1.5"/>


<link rel="stylesheet" type="text/css" href="/css/main.css?v=0.4.5.1"/>

  <meta name="description" content="xgfe's blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native." />


  <meta name="keywords" content="xgfe, xg, fe, 鲜果前端, 前端" />


  <link rel="alternate" target="_blank" href="/atom.xml" title="xgfe" type="application/atom+xml" />


  <link rel="shorticon icon" type="image/x-icon" href="http://p0.meituan.net/xgfe/2db359f56ce13be30dedef160e0e57ce16958.ico?v=0.4.5.1" />

<meta name="description" content="xgfe&apos;s blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.">
<meta name="keywords" content="xgfe, xg, fe, 鲜果前端, 前端">
<meta property="og:type" content="website">
<meta property="og:title" content="tags">
<meta property="og:url" content="http://xgfe.github.io/tags/index.html">
<meta property="og:site_name" content="xgfe">
<meta property="og:description" content="xgfe&apos;s blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.">
<meta property="og:updated_time" content="2017-04-12T08:03:36.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="tags">
<meta name="twitter:description" content="xgfe&apos;s blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.">


<script type="text/javascript" id="hexo.configuration">
  var CONFIG = {
    scheme: 'Mist',
    sidebar: 'post'
  };
</script>

  <title>
  

  
    标签 | xgfe
  
</title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">
  <div style="position: fixed; top: -9999px; left: -9999px;">
    <img src="http://p0.meituan.net/xgfe/082a9624ba5ae8602150a2d43968463e49348.png" alt="xgfe"/>
  </div>
  <!--[if lte IE 8]>
  <div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;margin:0 auto;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
      <img src="http://7u2nvr.com1.z0.glb.clouddn.com/picouterie.jpg" border="0" height="42" width="820"
           alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today or use other browser ,like chrome firefox safari."
           style='margin-left:auto;margin-right:auto;display: block;'/>
    </a>
  </div>
<![endif]-->
  

  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?3601d4483819a5ab6ddabb0b6422a328";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <div class="container one-column ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><h1 class="site-meta">
  <span class="logo-line-before"><i></i></span>
  <a href="/" class="brand" rel="start">
      <span class="logo">
        <i class="icon-next-logo"></i>
      </span>
      <span class="site-title">xgfe</span>
  </a>
  <span class="logo-line-after"><i></i></span>
</h1>

<div class="site-nav-toggle">
  <button>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
    <span class="btn-bar"></span>
  </button>
</div>

<nav class="site-nav">
  
  

  
    <ul id="menu" class="menu menu-left">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            <i class="menu-item-icon icon-next-home"></i> <br />
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            <i class="menu-item-icon icon-next-archives"></i> <br />
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            <i class="menu-item-icon icon-next-tags"></i> <br />
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-join">
          <a href="/join" rel="section">
            <i class="menu-item-icon icon-next-join"></i> <br />
            加入我们
          </a>
        </li>
      
      <!-- slide-links added by felix -->
      <li class="menu-item menu-item-slides" style="opacity: 1; transform: translateY(0px);">
        <a href="http://xgfe.github.io/Basics/" target="_blank" rel="section">
          <i class="menu-item-icon icon-next-slides"></i> <br>
          Basics
        </a>
      </li>
      <li class="menu-item menu-item-slides" style="opacity: 1; transform: translateY(0px);">
        <a href="https://slides.com/xgfe" target="_blank" rel="section">
          <i class="menu-item-icon icon-next-slides"></i> <br>
          Slides
        </a>
      </li>

      
      
    </ul>
  

  
    <div class="site-search">
      

    </div>
  

    <div class="site-search">
      <form class="site-search-form" id="gg-form" action="https://www.google.com/webhp" >
        <input type="text" name="q" id="gg-search-input" class="menu-search-input">
      </form>
    </div>
</nav>
 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div id="content" class="content"> 

  <div id="posts" class="posts-expand">
    
    
      <div class="tag-cloud">
        <div class="tag-cloud-title">
            目前共计 131 个标签
        </div>
        <div class="tag-cloud-tags">
          <a href="/tags/Activity-Router/" style="font-size: 12px; color: #ccc">Activity Router</a> <a href="/tags/Andorid/" style="font-size: 15px; color: #adadad">Andorid</a> <a href="/tags/Android/" style="font-size: 30px; color: #111">Android</a> <a href="/tags/Angular/" style="font-size: 12px; color: #ccc">Angular</a> <a href="/tags/AngularJS/" style="font-size: 12px; color: #ccc">AngularJS</a> <a href="/tags/CSRF/" style="font-size: 12px; color: #ccc">CSRF</a> <a href="/tags/CSS/" style="font-size: 15px; color: #adadad">CSS</a> <a href="/tags/CSS3/" style="font-size: 12px; color: #ccc">CSS3</a> <a href="/tags/Catogery/" style="font-size: 12px; color: #ccc">Catogery</a> <a href="/tags/Chrome-Developers-Tools/" style="font-size: 21px; color: #6f6f6f">Chrome Developers Tools</a> <a href="/tags/Coordinators/" style="font-size: 12px; color: #ccc">Coordinators</a> <a href="/tags/D3-js/" style="font-size: 24px; color: #4f4f4f">D3.js</a> <a href="/tags/DOM/" style="font-size: 12px; color: #ccc">DOM</a> <a href="/tags/Debug/" style="font-size: 21px; color: #6f6f6f">Debug</a> <a href="/tags/DevTools/" style="font-size: 21px; color: #6f6f6f">DevTools</a> <a href="/tags/Directive/" style="font-size: 12px; color: #ccc">Directive</a> <a href="/tags/E2E/" style="font-size: 12px; color: #ccc">E2E</a> <a href="/tags/ES6/" style="font-size: 12px; color: #ccc">ES6</a> <a href="/tags/Epoxy/" style="font-size: 12px; color: #ccc">Epoxy</a> <a href="/tags/Express/" style="font-size: 12px; color: #ccc">Express</a> <a href="/tags/Fragment/" style="font-size: 12px; color: #ccc">Fragment</a> <a href="/tags/IO/" style="font-size: 12px; color: #ccc">IO</a> <a href="/tags/IOS/" style="font-size: 12px; color: #ccc">IOS</a> <a href="/tags/ImageView-ScaleType/" style="font-size: 12px; color: #ccc">ImageView ScaleType</a> <a href="/tags/JavaScript/" style="font-size: 12px; color: #ccc">JavaScript</a> <a href="/tags/Less/" style="font-size: 12px; color: #ccc">Less</a> <a href="/tags/MVWhatever/" style="font-size: 12px; color: #ccc">MVWhatever</a> <a href="/tags/NoSql/" style="font-size: 12px; color: #ccc">NoSql</a> <a href="/tags/Node/" style="font-size: 12px; color: #ccc">Node</a> <a href="/tags/NodeJS/" style="font-size: 12px; color: #ccc">NodeJS</a> <a href="/tags/Paper/" style="font-size: 12px; color: #ccc">Paper</a> <a href="/tags/React/" style="font-size: 18px; color: #8e8e8e">React</a> <a href="/tags/React-Native/" style="font-size: 24px; color: #4f4f4f">React Native</a> <a href="/tags/ReactART/" style="font-size: 12px; color: #ccc">ReactART</a> <a href="/tags/Regular-Expression/" style="font-size: 12px; color: #ccc">Regular Expression</a> <a href="/tags/RxJava/" style="font-size: 12px; color: #ccc">RxJava</a> <a href="/tags/SDWebImage/" style="font-size: 12px; color: #ccc">SDWebImage</a> <a href="/tags/SSH2/" style="font-size: 12px; color: #ccc">SSH2</a> <a href="/tags/Sass/" style="font-size: 12px; color: #ccc">Sass</a> <a href="/tags/Service/" style="font-size: 12px; color: #ccc">Service</a> <a href="/tags/Thrift/" style="font-size: 12px; color: #ccc">Thrift</a> <a href="/tags/UI/" style="font-size: 12px; color: #ccc">UI</a> <a href="/tags/V8/" style="font-size: 12px; color: #ccc">V8</a> <a href="/tags/Vue/" style="font-size: 18px; color: #8e8e8e">Vue</a> <a href="/tags/Vue-resource/" style="font-size: 12px; color: #ccc">Vue-resource</a> <a href="/tags/Vue-router2-0/" style="font-size: 12px; color: #ccc">Vue-router2.0</a> <a href="/tags/Vue-js/" style="font-size: 12px; color: #ccc">Vue.js</a> <a href="/tags/Vue2-0/" style="font-size: 15px; color: #adadad">Vue2.0</a> <a href="/tags/Vuex2-0/" style="font-size: 12px; color: #ccc">Vuex2.0</a> <a href="/tags/XSS/" style="font-size: 12px; color: #ccc">XSS</a> <a href="/tags/Zxing/" style="font-size: 12px; color: #ccc">Zxing</a> <a href="/tags/andorid/" style="font-size: 12px; color: #ccc">andorid</a> <a href="/tags/android/" style="font-size: 12px; color: #ccc">android</a> <a href="/tags/angular/" style="font-size: 12px; color: #ccc">angular</a> <a href="/tags/angularjs/" style="font-size: 21px; color: #6f6f6f">angularjs</a> <a href="/tags/animation/" style="font-size: 15px; color: #adadad">animation</a> <a href="/tags/atom/" style="font-size: 12px; color: #ccc">atom</a> <a href="/tags/canvas2image/" style="font-size: 12px; color: #ccc">canvas2image</a> <a href="/tags/checkbox/" style="font-size: 12px; color: #ccc">checkbox</a> <a href="/tags/cocos2d-x/" style="font-size: 12px; color: #ccc">cocos2d-x</a> <a href="/tags/component/" style="font-size: 12px; color: #ccc">component</a> <a href="/tags/controller/" style="font-size: 12px; color: #ccc">controller</a> <a href="/tags/data/" style="font-size: 12px; color: #ccc">data</a> <a href="/tags/design-pattern/" style="font-size: 12px; color: #ccc">design pattern</a> <a href="/tags/directive/" style="font-size: 12px; color: #ccc">directive</a> <a href="/tags/docker/" style="font-size: 12px; color: #ccc">docker</a> <a href="/tags/electron/" style="font-size: 12px; color: #ccc">electron</a> <a href="/tags/form/" style="font-size: 12px; color: #ccc">form</a> <a href="/tags/git/" style="font-size: 15px; color: #adadad">git</a> <a href="/tags/git-hook/" style="font-size: 12px; color: #ccc">git hook</a> <a href="/tags/hopper/" style="font-size: 12px; color: #ccc">hopper</a> <a href="/tags/html/" style="font-size: 15px; color: #adadad">html</a> <a href="/tags/html2canvas/" style="font-size: 12px; color: #ccc">html2canvas</a> <a href="/tags/html2image/" style="font-size: 12px; color: #ccc">html2image</a> <a href="/tags/htmlhint/" style="font-size: 18px; color: #8e8e8e">htmlhint</a> <a href="/tags/iOS/" style="font-size: 27px; color: #303030">iOS</a> <a href="/tags/ios/" style="font-size: 12px; color: #ccc">ios</a> <a href="/tags/jasmine/" style="font-size: 12px; color: #ccc">jasmine</a> <a href="/tags/java/" style="font-size: 15px; color: #adadad">java</a> <a href="/tags/javascript/" style="font-size: 21px; color: #6f6f6f">javascript</a> <a href="/tags/karma/" style="font-size: 12px; color: #ccc">karma</a> <a href="/tags/keep-alive/" style="font-size: 12px; color: #ccc">keep-alive</a> <a href="/tags/library/" style="font-size: 12px; color: #ccc">library</a> <a href="/tags/link/" style="font-size: 12px; color: #ccc">link</a> <a href="/tags/listview/" style="font-size: 12px; color: #ccc">listview</a> <a href="/tags/lottie/" style="font-size: 12px; color: #ccc">lottie</a> <a href="/tags/objective-c/" style="font-size: 12px; color: #ccc">objective-c</a> <a href="/tags/optimization/" style="font-size: 12px; color: #ccc">optimization</a> <a href="/tags/postcss/" style="font-size: 12px; color: #ccc">postcss</a> <a href="/tags/protractor/" style="font-size: 12px; color: #ccc">protractor</a> <a href="/tags/react/" style="font-size: 15px; color: #adadad">react</a> <a href="/tags/router/" style="font-size: 12px; color: #ccc">router</a> <a href="/tags/rxjava/" style="font-size: 12px; color: #ccc">rxjava</a> <a href="/tags/svg/" style="font-size: 27px; color: #303030">svg</a> <a href="/tags/this/" style="font-size: 12px; color: #ccc">this</a> <a href="/tags/touches/" style="font-size: 12px; color: #ccc">touches</a> <a href="/tags/underscore-js/" style="font-size: 12px; color: #ccc">underscore.js</a> <a href="/tags/vim/" style="font-size: 12px; color: #ccc">vim</a> <a href="/tags/virtual-dom/" style="font-size: 12px; color: #ccc">virtual dom</a> <a href="/tags/vue-router/" style="font-size: 12px; color: #ccc">vue-router</a> <a href="/tags/web-api/" style="font-size: 12px; color: #ccc">web api</a> <a href="/tags/web性能/" style="font-size: 12px; color: #ccc">web性能</a> <a href="/tags/yarn/" style="font-size: 12px; color: #ccc">yarn</a> <a href="/tags/代码规范/" style="font-size: 15px; color: #adadad">代码规范</a> <a href="/tags/依赖注入/" style="font-size: 12px; color: #ccc">依赖注入</a> <a href="/tags/关键字/" style="font-size: 12px; color: #ccc">关键字</a> <a href="/tags/前端优化实践/" style="font-size: 12px; color: #ccc">前端优化实践</a> <a href="/tags/单元测试/" style="font-size: 12px; color: #ccc">单元测试</a> <a href="/tags/国际化/" style="font-size: 12px; color: #ccc">国际化</a> <a href="/tags/屏幕适配/" style="font-size: 12px; color: #ccc">屏幕适配</a> <a href="/tags/布局/" style="font-size: 12px; color: #ccc">布局</a> <a href="/tags/性能优化/" style="font-size: 12px; color: #ccc">性能优化</a> <a href="/tags/指令/" style="font-size: 12px; color: #ccc">指令</a> <a href="/tags/提问/" style="font-size: 12px; color: #ccc">提问</a> <a href="/tags/数据可视化/" style="font-size: 27px; color: #303030">数据可视化</a> <a href="/tags/正则表达式/" style="font-size: 12px; color: #ccc">正则表达式</a> <a href="/tags/测试/" style="font-size: 15px; color: #adadad">测试</a> <a href="/tags/源码/" style="font-size: 15px; color: #adadad">源码</a> <a href="/tags/爬虫/" style="font-size: 12px; color: #ccc">爬虫</a> <a href="/tags/移动端/" style="font-size: 12px; color: #ccc">移动端</a> <a href="/tags/端到端测试/" style="font-size: 12px; color: #ccc">端到端测试</a> <a href="/tags/编译顺序/" style="font-size: 12px; color: #ccc">编译顺序</a> <a href="/tags/词法作用域/" style="font-size: 12px; color: #ccc">词法作用域</a> <a href="/tags/读书笔记/" style="font-size: 12px; color: #ccc">读书笔记</a> <a href="/tags/跨浏览器属性/" style="font-size: 12px; color: #ccc">跨浏览器属性</a> <a href="/tags/路由/" style="font-size: 12px; color: #ccc">路由</a> <a href="/tags/进阶/" style="font-size: 12px; color: #ccc">进阶</a> <a href="/tags/适配/" style="font-size: 12px; color: #ccc">适配</a> <a href="/tags/高效的提问/" style="font-size: 12px; color: #ccc">高效的提问</a>
        </div>
      </div>
    
  </div>

 </div>

        

        
          <div class="comments" id="comments">
            <div id="SOHUCS" sid="" ></div>
          </div>
        
      </div>

      
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      <section class="site-overview">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <a href="https://github.com/xgfe" target="_blank"><img class="site-author-image" src="http://p0.meituan.net/xgfe/082a9624ba5ae8602150a2d43968463e49348.png" alt="xgfe" itemprop="image"/></a>
          <p class="site-author-name" itemprop="name">xgfe</p>
        </div>
        <p class="site-description motion-element" itemprop="description">xgfe's blog. 鲜果前端的技术博客，鲜果前端研发部官方博客。前端基础技术研究：html, html5, javascript, css, css3；前端框架研究：angularJs, react, react native.</p>
        <nav class="site-state motion-element">
          <div class="site-state-item site-state-posts">
            <a href="/archives">
              <span class="site-state-item-count">89</span>
              <span class="site-state-item-name">日志</span>
            </a>
          </div>

          <div class="site-state-item site-state-categories">
            
              <span class="site-state-item-count">37</span>
              <span class="site-state-item-name">作者</span>
              
          </div>

          <div class="site-state-item site-state-tags">
            <a href="/tags">
              <span class="site-state-item-count">131</span>
              <span class="site-state-item-name">标签</span>
              </a>
          </div>

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/atom.xml" target="_blank" rel="alternate">
              <i class="menu-item-icon icon-next-feed"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="https://github.com/xgfe" target="_blank">GitHub</a>
              </span>
            
          
        </div>

        
        

        <div class="links-of-author motion-element">
          
        </div>

      </section>

      

    </div>
  </aside>


    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner"> <div class="copyright" >
  
  &copy; &nbsp; 
  <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="icon-next-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">xgfe</span>
</div>

<div class="powered-by">
  由 <a class="theme-link" target="_blank" href="http://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>


 </div>
    </footer>

    <div class="back-to-top"></div>
  </div>

  <script type="text/javascript" src="/vendors/jquery/index.js?v=2.1.3"></script>

  
  
  
    <script type="text/javascript"> 
(function(){ 
var appid = 'cysWiXvkm'; 
var conf = 'prod_fc970dbe85103c7a79b2c4f3dc7fb190'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 960) { 
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="http://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("http://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
    

  


  
  
  <script type="text/javascript" src="/vendors/fancybox/source/jquery.fancybox.pack.js"></script>
  <script type="text/javascript" src="/js/fancy-box.js?v=0.4.5.1"></script>


  <script type="text/javascript" src="/js/helpers.js?v=0.4.5.1"></script>
  

  <script type="text/javascript" src="/vendors/velocity/velocity.min.js"></script>
  <script type="text/javascript" src="/vendors/velocity/velocity.ui.min.js"></script>

  <script type="text/javascript" src="/js/motion_global.js?v=0.4.5.1" id="motion.global"></script>




  <script type="text/javascript" src="/js/nav-toggle.js?v=0.4.5.1"></script>
  <script type="text/javascript" src="/vendors/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  

  <script type="text/javascript">
    $(document).ready(function () {
      if (CONFIG.sidebar === 'always') {
        displaySidebar();
      }
      if (isMobile()) {
        FastClick.attach(document.body);
      }
    });
  </script>

  

  
  

  
  <script type="text/javascript" src="/js/lazyload.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#posts").find('img').lazyload({
        placeholder: "/images/loading.gif",
        effect: "fadeIn"
      });
    });
  </script>

  <!-- google search, added by felix -->
  <script>
      $('#gg-form').on('submit', function(e) {
        var keyword = $.trim($(this).find('#gg-search-input').val());
        if (keyword) {
          location.href = 'https://www.google.com.hk/?gfe_rd=cr&ei=hXw8VpjtHuLC8AeSuIjQAg&gws_rd=ssl#safe=strict&q='+encodeURIComponent(keyword)+'+site:xgfe.github.io';
        }
        return false;
      });
  </script>
  <!-- baidu 站长自动推送 -->
  <script>
  (function(){
      var bp = document.createElement('script');
      bp.src = '//push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
  })();
  </script>
</body>
</html>
